<script setup lang="ts">
import {onMounted, ref, watch, watchEffect} from 'vue'

const activeName = ref<string>('first')
import type {TabsPaneContext} from 'element-plus'
import UserFriend from "/@/views/chat/components/UserInfo/UserFriend.vue";
import ChatGroup from "/@/views/chat/components/UserInfo/ChatGroup.vue";
import AllUser from "/@/views/chat/components/UserInfo/AllUser.vue";
import UserApply from "/@/views/chat/components/UserInfo/UserApply.vue";

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

</script>

<template>
    <div>
        <el-tabs
                v-model="activeName"
                type="card"
                class="demo-tabs"
                @tab-click="handleClick"
        >
            <el-tab-pane label="好友信息" name="first">
                <UserFriend></UserFriend>
            </el-tab-pane>

            <el-tab-pane label="群聊信息" name="second">
                <ChatGroup></ChatGroup>
            </el-tab-pane>

            <el-tab-pane label="所有好友" name="third">
                <AllUser></AllUser>
            </el-tab-pane>

            <el-tab-pane label="申请好友通知" name="fourth">
               <UserApply></UserApply>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<style scoped lang="scss">
.flesh {
  margin-bottom: 20px;
}
</style>